<template>
  <div class="main">
    <h3>Materials Manage</h3>
    <el-card class="search-upload">
      <div slot="header">
        <span>Upload / Search</span>
      </div>
      <el-row>
        <el-col :span="7">
          <div class="upload">
            <el-input v-model="materialTitle" placeholder="请先填写素材名称" />
            <el-upload
              class="upload-demo"
              :action="url"
              :show-file-list="false"
              :on-success="uploadTitle"
              :before-upload="checkTitle"
              style="margin-top: 5px; margin-left: 40px"
            >
              <el-button size="small" type="primary">选择素材上传</el-button>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="2" :offset="8">
          <div class="search-label">素材名称: </div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="materialSearch" />
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="primary" @click="search">查找</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header">
        <span>素材管理</span>
      </div>
      <div class="materials">
        <el-row type="flex" :gutter="20" class="flex-warp">
          <el-col v-for="item in materials" :key="item.id" :span="6">
            <el-card class="materials-card">
              <img class="materials-img" :src="'http://www.bufantec.com/media/' + item.fileName">
              <div class="material-bottom">
                <el-input v-if="showIptId === item.id" v-model="title" v-focus @blur="toggle('misMatchId', '')" @keyup.enter.native="modifiedTitle(item.id)" @keyup.esc.native="toggle('misMatchId', '')" />
                <div v-else class="material-title" @click="toggle(item.id, item.title)">Title: {{ item.title || "未命名" }}</div>
                <div class="material_del">
                  <el-button type="text" @click="doDelete(item.id)">删除</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-pagination
        style="text-align: center"
        :current-page="page.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { getMaterials, delMaterial, updateMaterial } from '@/api/news/materials'
import _ from 'lodash'
export default {
  directives: {
    focus: {
    // 指令的定义
      inserted: function(el) {
        el.querySelector('input').focus()
      }
    }
  },
  data() {
    return {
      materialTitle: '',
      materialId: '',
      materials: [],
      materialSearch: '',
      title: '',
      titleBak: '',
      showIptId: false,

      url: 'http://www.bufantec.com/admin/xy/upload/uploadImg',

      // pagination setting
      page: {
        current: 1,
        limit: 12,
        total: 0
      }
    }
  },
  created() {
    this.setMaterials()
  },
  methods: {
    setMaterials() {
      const params = {
        start: this.page.current,
        limit: this.page.limit
      }
      getMaterials({
        ...params
      }).then(res => {
        this.materials = res.data.list
        this.page.total = res.data.totalRow
      })
    },
    doDelete(id) {
      delMaterial({
        id
      }).then(res => {
        if (res.code === 'success') {
          this.$message.success('删除成功')
          this.setMaterials()
        }
      })
    },
    search() {
      let params = {
        start: 1,
        limit: this.page.limit,
        title: this.materialSearch
      }

      params = _.pickBy(params, item => item)

      getMaterials({
        ...params
      }).then(res => {
        this.materials = res.data.list
        this.page.total = res.data.totalRow
      })
    },
    checkTitle() {
      if (this.materialTitle === '') {
        this.$message.error('素材名称不能为空')
        return false
      }

      return true
    },
    uploadTitle(resp) {
      if (resp.id !== undefined) {
        updateMaterial({
          title: this.materialTitle,
          id: resp.id
        })

        this.$message.success('上传成功')
        this.materialTitle = ''
      }

      this.setMaterials()
    },
    modifiedTitle(id) {
      updateMaterial({
        title: this.title,
        id
      }).then(res => {
        if (res.code === 'success') {
          this.$message.success('修改成功')
          this.setMaterials()
        }
      }).catch(res => {
        this.$message.error('修改失败')
      })

      this.showIptId = 'misMatchId'
      this.title = ''
    },
    handleSizeChange(v) {
      this.page.limit = v
      this.setMaterials()
    },
    handleCurrentChange(v) {
      this.page.current = v
      this.setMaterials()
    },
    // if iptId === misMatchId, then show ipputBox and update it
    toggle(iptId, titleBak) {
      if (iptId === 'misMatchId') {
        this.title = ''
      }

      this.showIptId = iptId
      this.titleBak = titleBak
    }
  }
}
</script>

<style lang="scss" scoped>
  .main {
      margin: 0 auto;
      width: 1100px;
    h3 {
      text-align: center;
      font-weight: normal;
    }
    .upload {
      display: flex;
    }
    .search-label {
      line-height: 40px;
      font-size: 16px;
    }
    .materials-img {
      width: 200px;
      height: 200px;
      margin-left: 13px;
    }

    .materials-card{
      margin-bottom: 20px;;
    }

    .material-bottom {
      display: flex;
      justify-content: space-between;

      .material-title {
        height: 40px;
        line-height: 40px;
      }
    }
  }

  .flex-warp {
    flex-wrap: wrap;
  }
</style>
